<template>
	<Condition :conditionList="conditionList" v-model="condition">
		 <template #search="{ condition }">
			 <el-input
			   v-model="condition.search" size="large"
			   placeholder="请输入搜索的任务关键词">
			   <template #prefix>
				 <el-icon class="el-input__icon"><search /></el-icon>
			   </template>
			 </el-input>
		 </template>
		
	</Condition>
	 <TaskContainer>
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column type="selection" width="55" />
		     <el-table-column prop="id" label="序号" width="60"/>
			 <el-table-column prop="leave" label="难易程度" width="120"/>
			 <el-table-column prop="stage" label="阶段" width="120"/>
			 <el-table-column prop="module" label="模块名" width="160"/>
			 <el-table-column prop="title" label="任务名" class-name="hidden-column"/>
		</el-table>
		
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
			   :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div>
	 </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Condition,
	},
	data() {
		return {
			pagination: {
				page: 1, 
				rows: 10, 
			},
			list: [
			  {
				id: 1,
			    stage: '第一阶段',
				module: '基础',
				leave: '简单题',
				title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
			  },
			  {
			  	id: 2,
			    stage: '第一阶段',
			    module: '基础',
			    leave: '简单题',
				title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
			  },
			  {
			  				id: 1,
			    stage: '第一阶段',
			  				module: '基础',
			  				leave: '简单题',
			  				title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
			  },
			  {
			  	id: 2,
			    stage: '第一阶段',
			    module: '基础',
			    leave: '简单题',
			  				title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
			  },
			  {
			  				id: 1,
			    stage: '第一阶段',
			  				module: '基础',
			  				leave: '简单题',
			  				title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
			  },
			  {
			  	id: 2,
			    stage: '第一阶段',
			    module: '基础',
			    leave: '简单题',
			  				title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
			  },
			  {
			  				id: 1,
			    stage: '第一阶段',
			  				module: '基础',
			  				leave: '简单题',
			  				title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
			  },
			  {
			  	id: 2,
			    stage: '第一阶段',
			    module: '基础',
			    leave: '简单题',
			  				title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
			  },
			  {
			  				id: 1,
			    stage: '第一阶段',
			  				module: '基础',
			  				leave: '简单题',
			  				title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
			  },
			  {
			  	id: 2,
			    stage: '第一阶段',
			    module: '基础',
			    leave: '简单题',
			  				title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
			  },
			],
			condition: {} , // 查询条件
			conditionList: [
				{
					name: "任务阶段" ,
					value: 'stage',  // 查询条件对应的键
					list: [
						{id: 1, name: "第一阶段"},
						{id: 2, name: "第二阶段"},
						{id: 3, name: "第三阶段"},
						{id: 4, name: "第四阶段"},
						{id: 5, name: "第五阶段"}
					],
				},
				{
					name: "难易程度" ,
					value: 'leave',  // 查询条件对应的键
					list: [
						{id: "简单题", name: "简单题"},
						{id: "中等题", name: "中等题"},
						{id: "难题", name: "难题"},
						{id: "选做题", name: "选做题"},
					],
					multi: true, // 支持多选
				}
			]
		}
	},
	methods: {
		handleAdd(event) {
			this.$layer.open({
				type: 2,
				title: '添加人员组',
				shadeClose: true,
				shade: 0.5,
				area: ['480px', '200px'],
				btn: ['保存', '关闭'] ,
				content: '/group/add',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		batchRemove(event) {
			let rows = this.$refs.tb.getSelectionRows();
			console.log(rows);
		},
		handleApply(index, row) {
			this.$layer.open({
				type: 2,
				title: '分配人员 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['580px', '780px'],
				btn: ['保存', '关闭'] ,
				content: '/group/apply',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		handleTask(index, row) {
			this.$layer.open({
				type: 2,
				title: '分配任务 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['1300px', '780px'],
				btn: ['保存', '关闭'] ,
				content: '/group/task-list',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		}
	}
}
</script>

<style scoped>
.table-modules {
	padding: 10px 20px;
}
.table-modules span {
	padding: 2px 10px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.toolbar {
	position: relative;
	right: 10px;
	z-index: 200;
	text-align: right;
	margin: 20px;
	flex: 1 1 auto;
}

</style>

<style>
.hidden-column .cell{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>